<template>
  <div class="app">
    <Editor v-model="state" :formData="formData"></Editor>
    <!-- v-model="state"语法糖 => :modelValue = "state" @update:modelValue="XXX"-->
  </div>
</template>

<script>
import { ref, provide } from 'vue';
import data from './data.json';
import Editor from './packages/editor';
import { registerConfig as config } from './utils/editor-config';
import Range from './components/Range.jsx'
export default {
  components: {
    Editor,
    Range
  },
  setup() {

    /* [{
      "top": 100,
      "left": 100,
      "zIndex": 1,
      "key": "text",
      "props": {
        "text": "123",
        "color": "#000",
        "size": "14px"
      }
    },
    {
      "top": 200,
      "left": 200,
      "zIndex": 1,
      "key": "button",
      "props": {
        "text": "按钮",
        "type": "primary",
        "size": "mini"
      }
    },
    {
      "top": 300,
      "left": 300,
      "zIndex": 1,
      "key": "input",
      "props": {},
      "model": {}
    }] */

    const state = ref(data);
    // console.log('state', state); //state.value取值
    provide('config', config); // 将组件的配置直接传值 vue3的provide和inject是响应式的

    const formData = ref({
      username: 'zfjg',
      password: 123,
      start: 0,
      end: 100
    })

    return {
      state,
      formData
    }
  }
}

</script>

<style lang="scss">
.app {
  position: fixed;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
}
</style>
